<template>
  <view class="container">
    <view class="screen" @click="open">
      <view class="screen-fl">
        <view class="screen-txt">
          筛选
        </view>
        <image class="arrow_icon" src="/static/mine/toArrow.png" mode=""></image>
      </view>
      <view class="screen-fr">
        <image class="download_icon" src="../../static/mine/down.png" mode=""></image>
        <view class="download_txt">下载账单</view>
      </view>
    </view>
    <view class="menu">
      <view class="menu-item" v-for="(item, index) in billList" :key="index">
        <view class="menu-item-info">
          <view @click="handleToggle(index)">
            <view class="block">
              <view class="date">
                {{item.date}}
              </view>
              <image class="fangxiang_icon" :src="item.isopen?'/static/mine/toTop.png':'/static/mine/boBom.png'"
                mode=""></image>
            </view>
            <view class="line-bold">
              <view class="line-bold-item">
                <view class="label">
                  收款总金额
                </view>
                <view class="value">
                  ￥{{item.value1}}
                </view>
              </view>
              <view class="line-bold-item">
                <view class="label">
                  收款笔数
                </view>
                <view class="value">
                  {{item.value2}}
                </view>
              </view>
            </view>
          </view>
          <block v-if="item.isopen">
            <view class="line">
              <view class="line-item">
                <view class="label">
                  应到账金额
                </view>
                <view class="value">
                  ￥{{item.value3}}
                </view>
              </view>
              <view class="line-item">
                <view class="label">
                  手续费
                </view>
                <view class="value">
                  ￥{{item.value4}}
                </view>
              </view>
            </view>
            <view class="line">
              <view class="line-item">
                <view class="label">
                  退款金额
                </view>
                <view class="value">
                  ￥{{item.value5}}
                </view>
              </view>
              <view class="line-item">
                <view class="label">
                  折扣优惠
                </view>
                <view class="value">
                  ￥{{item.value6}}
                </view>
              </view>
            </view>
          </block>
        </view>
        <view class="menu-item-body" v-if="item.isopen">
          <view class="row" v-for="(item2, index2) in item.payList" :key="index2">
            <image class="pay_icon" src="/static/mine/wechat_login.png" mode=""></image>
            <view class="row-info">
              <view class="row-info-top">
                {{item2.payTime}} 支付
              </view>
              <view class="row-info-bom">
                <view class="tag" v-for="(item3, index3) in item2.tags">
                  {{item3.label}}
                </view>
              </view>
            </view>
            <view class="row-fr">
              <view class="pay_count">+{{item2.amount}}</view>
              <image class="arrow_icon" src="/static/images/arrow.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uv-popup ref="popup" mode="bottom" round="20" :closeable="true">
      <view class="dialog">
        <view class="dialog-title">
          筛选
        </view>
        <view class="dialog-body">
          <view class="block">
            <view class="block-title">
              快捷时间
            </view>
            <view class="tabs">
              <view class="tab-item" :class="currentIndex4 == index?'active':''" @click="setIndex4(index)"
                v-for="(item, index) in tabList4" :key="index">
                {{item.name}}
              </view>
            </view>
          </view>
          <view class="block">
            <view class="block-title" style="display: flex;justify-content: space-between;">
              <text>自定义时间</text>
              <text class="desc">最长可查找时间跨度一年的交易</text>
            </view>
            <view class="time-range">
              <view class="time-range-item" @click="openTime('start')">
                {{params.startTime }}
              </view>
              至
              <view class="time-range-item" @click="openTime('end')">
                {{params.endTime}}
              </view>
            </view>
          </view>
          <view class="block">
            <view class="block-title">
              收款平台
            </view>
            <view class="tabs">
              <view class="tab-item" :class="currentIndex1 == index?'active':''" @click="setIndex1(index)"
                v-for="(item, index) in tabList1" :key="index">
                {{item.name}}
              </view>
            </view>
          </view>
          <view class="block">
            <view class="block-title">
              消费类型
            </view>
            <view class="tabs">
              <view class="tab-item" :class="currentIndex2 == index?'active':''" @click="setIndex2(index)"
                v-for="(item, index) in tabList2" :key="index">
                {{item.name}}
              </view>
            </view>
          </view>
          <view class="block">
            <view class="block-title">
              收款员工
            </view>
            <view class="tabs">
              <view class="tab-item" :class="currentIndex3 == index?'active':''" @click="setIndex3(index)"
                v-for="(item, index) in tabList3" :key="index">
                {{item.name}}
              </view>
            </view>
          </view>
        </view>
        <view class="dialog-foot">
          <view class="btn1">
            重置
          </view>
          <view class="btn2">
            确定
          </view>
        </view>
      </view>
    </uv-popup>
    <uv-datetime-picker ref="datetimePicker" v-model="value" mode="date" @confirm="confirm">
    </uv-datetime-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        billList: [{
          isopen: true,
          date: "2024/08/23",
          value1: "9.00",
          value2: "0",
          value3: "9.00",
          value4: "0",
          value5: "9.00",
          value6: "0",
          payList: [{
            payTime: "12:15:23",
            tags: [{
                label: "次日到账"
              },
              {
                label: "折扣买单"
              }
            ],
            amount: "800"
          }]

        }],
        tabList1: [{
            name: "全部"
          },
          {
            name: "支付宝"
          },
          {
            name: "微信"
          }
        ],
        tabList2: [{
            name: "全部"
          },
          {
            name: "支付宝"
          },
          {
            name: "微信"
          },
          {
            name: "团购"
          }
        ],
        tabList3: [{
            name: "全部"
          },
          {
            name: "老板"
          }
        ],
        tabList4: [{
            name: "今天"
          },
          {
            name: "昨天"
          },
          {
            name: "近7天"
          },
          {
            name: "近30天"
          }
        ],
        currentIndex1: 0,
        currentIndex2: 0,
        currentIndex3: 0,
        currentIndex4: 0,
        value: Number(new Date()),
        params: {
          startTime: "",
          endTime: ""
        },
        openType: ""
      }
    },
    onLoad() {
      this.getTime();
    },
    methods: {
      openTime(type) {
        console.log("type", type);
        this.openType = type;
        this.$refs.datetimePicker.open();
      },
      confirm(e) {
        console.log('confirm', e);
        if (this.openType == "start") {
          this.params.startTime = uni.$uv.timeFormat(e.value, "yyyy-mm-dd");
          console.log('startTime', this.params.startTime);
        }
        if (this.openType == "end") {
          this.params.endTime = uni.$uv.timeFormat(e.value, "yyyy-mm-dd");
          console.log('endTime', this.params.endTime);
        }

      },
      getTime() {
        switch (this.currentIndex4) {
          case 0:
            this.getTodayRange()
            break;
          case 1:
            this.getTomorrowRange()
            break;
          case 2:
            this.getLast7DaysRange()
            break;
          default:
            this.getLast30DaysRange()
            break;
        }
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}-${month}-${day}`;
      },

      getTodayRange() {
        const today = new Date();
        today.setHours(0, 0, 0, 0); // 设置时间为今天的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(today), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(today);
        this.params.endTime = this.formatDate(tomorrow);
      },

      getTomorrowRange() {
        const today = new Date();
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        const dayAfterTomorrow = new Date(tomorrow);
        dayAfterTomorrow.setDate(tomorrow.getDate() + 1); // 设置时间为后天天的开始
        // return { start: this.formatDate(tomorrow), end: this.formatDate(dayAfterTomorrow) };
        this.params.startTime = this.formatDate(tomorrow);
        this.params.endTime = this.formatDate(dayAfterTomorrow);
      },

      getLast7DaysRange() {
        const today = new Date();
        const sevenDaysAgo = new Date(today);
        sevenDaysAgo.setDate(today.getDate() - 6); // 设置时间为7天前的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(sevenDaysAgo), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(sevenDaysAgo);
        this.params.endTime = this.formatDate(tomorrow);
      },

      getLast30DaysRange() {
        const today = new Date();
        const thirtyDaysAgo = new Date(today);
        thirtyDaysAgo.setDate(today.getDate() - 29); // 设置时间为30天前的开始
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1); // 设置时间为明天的开始
        // return { start: this.formatDate(thirtyDaysAgo), end: this.formatDate(tomorrow) };
        this.params.startTime = this.formatDate(thirtyDaysAgo);
        this.params.endTime = this.formatDate(tomorrow);
      },
      handleToggle(index) {
        this.billList[index].isopen = !this.billList[index].isopen;
      },
      open() {
        this.$refs.popup.open();
      },
      setIndex1(index) {
        this.currentIndex1 = index;
      },
      setIndex2(index) {
        this.currentIndex2 = index;
      },
      setIndex3(index) {
        this.currentIndex3 = index;
      },
      setIndex4(index) {
        this.currentIndex4 = index;
        this.getTime();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .time-range {
    display: flex;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    align-items: center;

    .time-range-item {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      width: 330rpx;
      height: 84rpx;
      background: #F7F8FA;
      text-align: center;
      line-height: 84rpx;
      border-radius: 30rpx;
    }
  }

  .active {
    background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%) !important;
    color: #fff !important;
  }

  .container {
    padding: 30rpx;
    box-sizing: border-box;

    .dialog {
      padding: 30rpx;
      box-sizing: border-box;

      .dialog-title {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        margin-bottom: 40rpx;
      }

      .dialog-body {
        .block {
          margin-bottom: 30rpx;

          .block-title {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 20rpx;

            .desc {
              color: #EA7222;
            }
          }

          .tabs {
            display: flex;
            flex-wrap: wrap;

            .tab-item {
              width: 210rpx;
              height: 68rpx;
              border-radius: 12rpx;
              border: 2rpx solid #EEEEEE;
              text-align: center;
              line-height: 68rpx;
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              margin-right: 20rpx;
              margin-bottom: 15rpx;
            }

            .tab-item:nth-child(3n) {
              margin-right: 0;
            }
          }
        }
      }

      .dialog-foot {
        display: flex;
        justify-content: space-between;

        .btn1 {
          width: 180rpx;
          height: 84rpx;
          border-radius: 48rpx;
          border: 2rpx solid #EA7222;
          font-weight: bold;
          font-size: 32rpx;
          color: #EA7222;
          text-align: center;
          line-height: 88rpx;
        }

        .btn2 {
          width: 420rpx;
          height: 88rpx;
          background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
          border-radius: 48rpx;
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 88rpx;
        }
      }
    }

    .menu {
      margin: 30rpx 0;

      .menu-item {
        background: #FFFFFF;
        border-radius: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;

        .menu-item-info {
          .block {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .date {
              font-weight: bold;
              font-size: 36rpx;
              color: #333333;
            }

            .fangxiang_icon {
              width: 48rpx;
              height: 48rpx;
            }
          }

          .line-bold {
            display: flex;
            margin-top: 24rpx;

            .line-bold-item {
              flex: 1;
              display: flex;

              .label {
                font-weight: 400;
                font-size: 26rpx;
                color: #333333;
                margin-right: 18rpx;
              }

              .value {
                font-weight: bold;
                font-size: 26rpx;
                color: #333333;
              }
            }
          }

          .line {
            display: flex;
            margin-top: 24rpx;

            .line-item {
              flex: 1;
              font-weight: 400;
              font-size: 22rpx;
              color: #666666;
              display: flex;

              .label {
                margin-right: 12rpx;
              }

              .value {}
            }
          }
        }

        .menu-item-body {
          padding: 30rpx;
          box-sizing: border-box;
          background: #FEFBF8;
          border-radius: 30rpx;
          margin-top: 30rpx;

          .row:last-child {
            margin-bottom: 0 !important;
          }

          .row {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;

            .pay_icon {
              width: 48rpx;
              height: 48rpx;
            }

            .row-info {
              display: flex;
              flex-direction: column;
              flex: 1;
              padding: 0 14rpx;
              box-sizing: border-box;

              .row-info-top {
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
              }

              .row-info-bom {
                display: flex;
                margin-top: 12rpx;

                .tag {
                  font-weight: 400;
                  font-size: 20rpx;
                  color: #EA2222;
                  border-radius: 6rpx;
                  border: 2rpx solid #EA2222;
                  margin-right: 24rpx;
                }
              }
            }

            .row-fr {
              display: flex;
              align-items: center;

              .pay_count {
                font-weight: bold;
                font-size: 28rpx;
                color: #EA2222;
              }

              .arrow_icon {
                width: 48rpx;
                height: 48rpx;
              }
            }
          }
        }
      }
    }

    .screen {
      display: flex;
      justify-content: space-between;
      .screen-fl {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 152rpx;
        height: 50rpx;
        background: #FFFFFF;
        border-radius: 16rpx;

        .screen-txt {
          font-weight: bold;
          font-size: 24rpx;
          color: #333333;
          margin-right: 10rpx;
        }

        .arrow_icon {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .screen-fr {
        width: 152rpx;
        height: 50rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .download_icon {
          width: 24rpx;
          height: 24rpx;
        }

        .download_txt {
          font-weight: bold;
          font-size: 24rpx;
          color: #EA7222;
        }
      }

    }
  }
</style>